<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>
        <van-tabbar v-model="active"  v-show="show_tab">
            <van-tabbar-item replace
                             to="/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace
                             to="/apply" icon="smile-o">报名页</van-tabbar-item>
            <van-tabbar-item replace
                             to="/rank" icon="bar-chart-o">排行榜</van-tabbar-item>
            <van-tabbar-item replace
                             to="/introduction" icon="gem-o">活动说明</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {
        Tabbar, TabbarItem
    } from 'vant'
    export default {
        name: 'app',
        components: {
            [Tabbar.name]: Tabbar,
            [TabbarItem.name]: TabbarItem,
        },
        data () {
            return {
                transitionName: '',
                active: 0
            }
        },
        watch: {// 使用watch 监听$router的变化
            $route (to, from) {
                // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
                if (to.meta.index > from.meta.index) {
                    // 设置动画名称
                    this.transitionName = 'slide-left'
                } else {
                    this.transitionName = 'slide-right'
                }
            }
        },
        mounted() {
            // console.log(this.$route.name)
        },
        computed: {
            show_tab() {
                return this.$route.name!=='login' && this.$route.name!=='wine'
            }
        }
    }
</script>

<style scoped lang="less">
    *{
        -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none;/*火狐*/
        -ms-user-select:none; /*IE10*/
        user-select:none;
    }
    body, .container{
        margin-bottom: 3.125rem;
    }
</style>

